<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改用户头像')" />
	<th:block th:include="include :: cropbox-css" />
</head>
<body class="white-bg" style="margin-top:-10px">
    <div class="container"> 
    <div>
		<input id="logoUpload" type="file" name="logoUpload" style="visibility: hidden; display: none;" /> 
		<input id="imageBase64" type="hidden" name="imageBase64" value="" data-bind="imageBase64" />
		<img width="400px" height="400px" id="imageShow" src='/img/profile.jpg'> 
	</div>
	<div>
		<a type="button" id="filebutton" onclick="logoUpload.click()" class="btn btn-danger">Select local image</a>
	</div>
                        
    </div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: cropbox-js" />
<script type="text/javascript">
var cropper;

function submitHandler() {
	var prefix = ctx + "system/appResnetPic";
	$.ajax({
		url : prefix+'/add',
		type : 'post',
		dataType : 'json',
		cache : false,
		data : {
			imageBase64 : $("#imageBase64").val(),
			logoUpload : $("#logoUpload").val()
		},
		success : function(result) {
			$.operate.saveSuccess(result);
		},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			alert("error");
		}
	})
}

$("#logoUpload").change(function() {
	var file = this.files[0];
	var fileName = file.name.toLowerCase();
	var index = fileName.lastIndexOf(".");
	var fileExt = fileName.substring(index);//后缀名  
	var allowExt = ".jpg,.jpeg,.png";
	if (allowExt.indexOf(fileExt) == -1) {
		alert('图片格式错误');
		return;
	}
	if (file.size >= 3 * 1024 * 1024) {
		alert('图片文件大小不能大于3M');
		return;
	}
	var reader = new FileReader();
	reader.readAsDataURL(file);//调用自带方法进行转换
	reader.onload = function(e) {
		$("#imageShow").attr("src", this.result);//将转换后的编码存入src完成预览
		$("#imageBase64").val(this.result);//将转换后的编码保存到input供后台使用
	};
});

</script>
</body>
</html>
